import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
import { Checkbox, CheckboxGroup } from "components/Checkbox";

<Meta title="Components/Checkbox" component={Checkbox} />

# Checkbox

A Wrap of html Checkbox.

## Props

All of the html Checkbox props can be used.

<Props of={Checkbox} />

## Examples

### Basic

Basic usages for `Checkbox` component.

<Preview>
  <Story name="basic checkbox">
    <div>
      <Checkbox name="test">Test1</Checkbox>
      <Checkbox name="test">Test2</Checkbox>
      <Checkbox name="test" disabled>
        Test3
      </Checkbox>
    </div>
  </Story>
</Preview>

# CheckboxGroup

A Wrap of html CheckboxGroup.

## Props

All of the html CheckboxGroup props can be used.

<Props of={CheckboxGroup} />

## Examples

### Basic

Basic usages for `CheckboxGroup` component.

<Preview>
  <Story name="basic checkbox group">
    {() => {
      const options = [
        {
          label: "中国",
          value: "China",
        },
        {
          label: "巴西",
          value: "Brazil",
        },
        {
          label: "俄罗斯",
          value: "Russian",
        },
        {
          label: "南非",
          value: "South Africa",
        },
        {
          label: "印度",
          value: "Indian",
        },
      ];
      return <CheckboxGroup name="test" options={options} />;
    }}
  </Story>
</Preview>

<Preview>
  <Story name="checkbox group with children">
    {() => {
      const options = [
        {
          label: "中国",
          value: "China"
        },
        {
          label: "巴西",
          value: "Brazil"
        },
        {
          label: "俄罗斯",
          value: "Russian"
        },
        {
          label: "南非",
          value: "South Africa"
        },
        {
          label: "印度",
          value: "Indian"
        }
      ];
      return (
        <CheckboxGroup name="test" options={options}>
          {
            options.map(item => (
              <Checkbox key={item.value} value={item.value}>
                {item.label}
              </Checkbox>
            ))
          }
        </CheckboxGroup>
      );
    }}
  </Story>
</Preview>
